<template>
  <TinyButton
    ref="lbtnRef"
    :disabled="disabled"
    :icon="getIcon"
    :type="type"
    :size="size"
    :reset-time="resetTime?resetTime:500"
    :text="text"
    :circle="circle"

    @click="click"
  >
    <slot></slot>
  </TinyButton>
</template>
<script>
import { Button } from '@opentiny/vue'
import { IconDel, IconYes, IconEdit, IconSearch,  IconPlus,IconMinus,IconArrowUp,IconArrowDown,IconDownload,IconRefres,IconMore } from '@opentiny/vue-icon'

export default {
  components: {
    TinyButton: Button,
    TinyIconMore: IconMore,
  },
  props: {
    size: {type: [String, Number], default: 'small'},
    text: {type: String, default: ''},
    type: {type: String, default: ''},
    disabled: {type: Boolean, default: false},
    circle: {type: Boolean, default: false},
    resetTime: {type: Number, default: 0},
    icon: {type: String, default: ''},
  },
  computed: {
    getIcon () {
      return this.icon ?this[this.icon.toLowerCase()]: ''
    }
  },
  data () {
    return {
      del: IconDel(),
      yes: IconYes(),
      edit: IconEdit(),
      plus: IconPlus(),
      search: IconSearch(),
      minus: IconMinus(),
      arrowUp: IconArrowUp(),
      arrowDown: IconArrowDown(),
      download: IconDownload(),
      refresh: IconRefres(),
      more: IconMore(),
    }
  },
  emits: ['click'],
  methods: {
    click () {
      this.$refs.lbtnRef.$el.blur()
      this.$emit('click')
    }
  }
}
</script>
<style scoped lang="scss">
:deep(.el-button--small) {

}
:deep(.el-button--large) {
  border-radius: 0 !important;
}

</style>